<template>
  <div class="suggestion flex">
    <div class="suggestion-button inline-flex items-center cursor-pointer"
         v-for="item in group"
         :key="item.value"
         @click="onSend(item)">{{item.label}}</div>
  </div>
</template>

<script>
export default {
  name: 'Suggestion',
  props: {
    group: {
      type: Array,
      default: () => ([])
    }
  },
  methods: {
    onSend (item) {
      const { value: name, options } = item
      this.$store.commit('SET_CONTENT',
        {
          type: 'GPT',
          name,
          options,
        },
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.suggestion {
  &-button {
    height: 36px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #59a7f6;
    font-size: 14px;
    font-weight: 400;
    color: #0265dc;
    padding: 0 12px;
    transition: all 200ms;
    &:hover {
      border-color: #0265dc;
    }
  }
}
</style>
